<template>
<view>
  <!-- <uni-nav-bar :title="`${isRegBtn ? '注册' : '登录'}`" /> -->
  <view class="uni-flex uni-column mian-login">
    <!-- 头像 -->
    <view class="flex-item flex-item-V">
      <image class="avatar-icon"></image>
    </view>
    <!-- 登录表单信息 -->
    <view class="flex-item flex-item-V">
      <uni-forms ref="orderFormRef" :modelValue="orderFormData" :rules="rulesForm">
        <uni-forms-item label="用户名:" required name="username">
          <uni-easyinput v-model="orderFormData.username" placeholder="请输入姓名" />
        </uni-forms-item>
        <uni-forms-item label="密码:" required name="password">
          <uni-easyinput type="password" v-model="orderFormData.password" placeholder="请输入密码" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="flex-item flex-item-V">
      <button class="red-btn" @click="submitRegData" v-if="isRegBtn"> 注册 </button>
      <button class="red-btn" @click="submitLoginData" v-else> 登录 </button>
    </view>
    <view class="flex-item flex-item-V">
      <uni-data-checkbox v-model="pawStatus" :localdata="pawData"></uni-data-checkbox>
    </view>
    <navigator class="gray-btn" url="/pages/login/login"  v-if="isRegBtn">
      <button class="gray-btn" hover-class="none">  跳转登录  </button>
    </navigator>
    <navigator class="gray-btn" url="/pages/register/register" v-else>
      <button class="gray-btn" hover-class="none"> 跳转注册 </button>
    </navigator>
  </view>
  <view class="uni-flex uni-row uni-footer" v-if="!isRegBtn">
    <view class="flex-item" @click="handleLoginWX">微信登录</view>
      <!-- <view class="flex-item" @click="handleShareOpen">其他登录方式</view> -->
      <view class="flex-item"  @click="handleToogle('bottom')">忘记密码</view>
  </view>
  <!-- 忘记密码--弹窗 -->
  <uni-popup class="popup-model" background-color="#fff" ref="toggRef"  @change="handleToggChange">
    <uni-nav-bar title="忘记密码"></uni-nav-bar>
    <view class="uni-flex uni-column popup-content" :class="{ 'popup-height': toggType === 'left' || toggType === 'right' }">
      <view class="flex-item flex-item-V">
        <uni-forms ref="orderTwoRef" :modelValue="orderFormTwo" :rules="rulesForm">
          <uni-forms-item label="用户名:" required name="username">
            <uni-easyinput v-model="orderFormTwo.username" placeholder="请输入姓名" />
          </uni-forms-item>
          <uni-forms-item label="新密码:" required name="password">
            <uni-easyinput type="password" v-model="orderFormTwo.password" placeholder="请输入密码" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="flex-item flex-item-V">
        <button class="red-btn" @click="handelEditUser"> 确定 </button>
      </view>
    </view>
  </uni-popup>
  <!-- 其他登录方式 @select="handleShare" -->
  <uni-popup ref="shareRef" type="share" safeArea backgroundColor="#fff">
    <uni-popup-share title="分享到" ></uni-popup-share>
  </uni-popup>
</view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  // 组件通信
  const props = defineProps({
    isRegBtn: {   // 验证：true = 注册页，false = 登录页
      type: Boolean,
      default: true, 
    },
  })
  // 声明定义字段
  const orderFormRef = ref(null)
  const orderFormData = ref({})
  const pawStatus = ref(null)
  const pawData = ref([{ text: `我已阅读协议...`,value: 1 }])
  const rulesForm = ref({  // 必填校验
    username: {
      rules: [{ required: true, errorMessage: '姓名不能为空' }]
    },
    password: {
      rules: [{ required: true, errorMessage: '密码不能为空' }]
    }
  })
  
  // 提交--注册用户
  const submitRegData =()=>{
    orderFormRef.value.validate(async (valid)=>{  // 必填校验
      if(pawStatus.value !== 1) return uni.showToast({  title: '未勾选协议！',duration: 3000,icon: 'none' })
      if(!valid && pawStatus.value === 1){
        orderFormData.value.agreement = pawStatus.value
        const { data: res } = await uni.$http.post('/regusers',orderFormData.value )
        if(res.success) {
          uni.showToast({ title: '提交成功！',duration: 3000 })
          uni.redirectTo({ url: '/pages/login/login' })
        } else {
          uni.showToast({ title:  res.msg,duration: 3000,icon: 'none' })
        }
      }
    })
  }
  // 提交--登录
  const submitLoginData = ()=>{
    orderFormRef.value.validate(async (valid)=> {
      if(pawStatus.value !==1) return uni.showToast({ title: '未勾选协议！',duration:3000,icon:'none' })
      if (!valid && pawStatus.value ===1) {
        orderFormData.value.agreement = pawStatus.value
        const { data: res } = await uni.$http.post('/login',orderFormData.value)
        if(res.success){
          uni.setStorageSync('userInfo',res.data)
          uni.showToast({ title: '提交成功！', duration: 3000 })
          uni.switchTab({ url: '/pages/home/home' })
        } else {
        uni.showToast({ title: res.msg, duration:3000, icon:'none' })
      }
      } 
    })
  }
  
  // 忘记密码
  const orderTwoRef = ref(null)
  const orderFormTwo = ref({})
  const toggRef = ref(null)
  const toggType = ref('center')
  const handleToggChange = (e)=>{
    console.log('当前模式：' + e.type + ',状态：' + e.show);
  }
  // 打开弹窗
  const handleToogle = (type) => {
    toggType.value = type
    toggRef.value.open(type)
    const getUserInfo = uni.getStorageSync('userInfo')
    orderFormTwo.value.username = (getUserInfo!== ''||getUserInfo!== undefined||getUserInfo!== null) ? getUserInfo.username : ''
  }
  // 提交修改--密码
  const handelEditUser = ()=>{
    
    orderTwoRef.value.validate(async (valid) => {
      if(!valid){
        const { data: res } = await uni.$http.post('/editUser',orderFormTwo.value)
        
        if(res.success){
          uni.showToast({ title: '修改成功！', duration: 3000,icon:'none' })
          toggRef.value.close()
          orderFormTwo.value = {}
        } else {
          uni.showToast({ title: res.msg, duration: 3000, icon:'none' })
        }
      }
    })
  }
  // 其他登录方式
  const shareRef = ref(null)
  const handleShareOpen = ()=>{
    shareRef.value.open()
  }
  
  // 微信登录
  const handleLoginWX = async ()=>{
    uni.showToast({
      title: '敬请期待...',
      duration: 3000,
      icon:'none'
    })
  }
</script>

<style lang="scss">
.mian-login{
  text-align: center;
  padding: 30px 30px;
  .flex-item {
    margin-bottom: 10px;
  }
  .avatar-icon{
    height: 90px;
    width: 90px;
    margin-bottom: 20px;
    border-radius: 25%;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    background: radial-gradient(circle at center,#ecb886 20%, #FF2442 80% );
  }
}
.uni-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>